<!--
 * @Descripttion: 重要通知浮窗展示
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-19 13:46:23
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-31 10:09:09
-->
<template>
  <transition>
    <div class="dragIcon" v-if="!isShow">
      <el-collapse v-model="activeNames" @change="changeTitileTipBtn">
        <el-collapse-item>
          <template slot="title">
            <i
              class="iconfont iconzhongyaotongzhi-you"
              :class="
                isShow == true ? 'noNoticeTitleIconfont' : 'noticeTitleIconfont'
              "
            ></i>
            <span
              class="noticeTitle"
              :title="
                titileTipStatus == true
                  ? '展开重要通知浮窗'
                  : '收起重要通知浮窗'
              "
              >重要通知</span
            >
          </template>
          <ul class="noticeContent">
            <li
              class="noticeitem"
              v-for="(item, index) of noticeDate"
              :key="index"
            >
              <p>
                <el-link
                  class="noticeListTitle"
                  @click="showNoticeDetail(index, item)"
                  >{{ getSubStringSum(item.title, 6) }}</el-link
                >
              </p>
              <span class="noticeListContent">{{
                getSubStringSum(item.infoBrief, 6)
              }}</span>
            </li>
            <!-- <li class="noImportantNotice" v-show="isShow">
              <p>暂无重要通知</p>
            </li> -->
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
      titileTipStatus: 'false',
    }
  },

  computed: {
    noticeDate() {
      return this.$store.state.noticeDate
    },
    isShow() {
      const vm = this
      if (vm.$store.state.noticeDate.length < 1) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    /**
     * @description: 改变提示消息
     */
    changeTitileTipBtn() {
      this.titileTipStatus = !this.titileTipStatus
    },
    /**
     * @description:指定字符串 溢出显示省略号
     */
    getSubStringSum: (str, num) => {
      let newStr
      if (str) {
        str = str + ''
        if (str.trim().length > num) {
          newStr = str.trim().substring(0, num) + '......'
        } else {
          newStr = str.trim()
        }
      } else {
        newStr = ''
      }
      return newStr
    },
    /**
     * @description: 跳转到重要通知详情页面
     */
    showNoticeDetail(index, row) {
      this.$router.push({
        path: '/home/notice/noreaddetail',
        name: 'noreaddetail',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/notice/inforList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.dragIcon {
  position: fixed;
  width: 12%;
  min-width: 150px;
  max-width: 300px;
  max-height: 308px;
  overflow-y: auto;
  opacity: 0.85;
  background: #141f2a;
  box-shadow: -2px 0 4px 0 rgba(30, 43, 58, 0.5);
  font-family: SourceHanSansCN-Bold;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  z-index: 999;
  right: 0px;
  bottom: 0px;
  .noticeTitleIconfont {
    font-size: 12px;
    color: red;
    margin-top: 5px;
  }
  .noNoticeTitleIconfont {
    font-size: 12px;
    color: #52595e;
    margin-top: 5px;
  }
}
.noticeIcon {
  cursor: pointer;
  float: right;
}
/deep/ .el-collapse-item__content {
  padding: 0;
}
/deep/ .el-collapse-item__header {
  opacity: 0.85;
  background: #141f2a;
  box-shadow: -2px 0 4px 0 rgba(30, 43, 58, 0.5);
  font-family: SourceHanSansCN-Bold;
  font-size: 16px;
  color: #ffffff;
  height: 36px;
  line-height: 1;
  letter-spacing: 0;
  padding-left: 20px;
  border-bottom: 1px solid #999999;
}
.noticeTitle {
  margin-left: 8px;
}
/deep/.el-collapse-item__wrap {
  background-color: #141f2a !important;
}
.noticeContent {
  opacity: 0.85;
  background: #141f2a;
  box-shadow: -2px 0 4px 0 rgba(30, 43, 58, 0.5);
  .noImportantNotice {
    line-height: 100px;
    font-family: SourceHanSansCN-Regular;
    font-size: 16px;
    color: #999999;
    letter-spacing: 0;
    text-align: center;
  }
  .noticeitem {
    border-bottom: 1px solid #999999;
    padding: 18px;
    .noticeListTitle {
      font-family: SourceHanSansCN-Bold;
      font-size: 14px;
      color: #44d7b6;
      letter-spacing: 0;
    }
    .noticeListContent {
      font-family: SourceHanSansCN-Regular;
      font-size: 14px;
      color: #cccccc;
      letter-spacing: 0;
      line-height: 20px;
    }
  }
  .noticeitem:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}
</style>
